<template>
  <div>
    <Header :left="true" leftText="返回" title="调机审核" />

    <!-- 滑动区域，适应手机分辨率 -->
    <div class="textScroll">
      <!-- 文字信息 -->
      <van-row style="margin-top: 10px">
        <van-col>
          <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
        </van-col>
        <van-col class="message" style="margin-top: 5px">调机单据信息</van-col>
      </van-row>

      <div class="divMessage">
        <Field v-model="form.Id" :readonly="true" size="small" class="Field" center colon label="调机单ID" />
        <Field v-model="form.ProductionDate" rows="1" autosize style="font-weight: bold; color: #a9a9a9" :readonly="true"
          label="生产日期" type="textarea" />
        <Field v-model="form.POrderID" :readonly="true" size="small" class="Field" center colon label="生产订单" />
        <Field v-model="form.MaterialID" :readonly="true" size="small" class="Field" center colon label="物料编号" />
        <Field v-model="form.MaterialName" :readonly="true" size="small" class="Field" center colon label="物料名称" />
        <Field :readonly="true" size="small" class="Field" center colon label="生产时间">
          <template #input>
            <span>从 {{ form.ProDatetimeFrom }} 至 {{ form.ProDatetimeTo }}</span>
          </template>
        </Field>
        <Field v-model="form.QProblemID" :readonly="true" type="textarea" class="Field2" rows="2" label="异常原因">

        </Field>
        <Field v-model="form.ManageReasonID" :readonly="true" type="textarea" class="Field2" rows="2" label="      ">

        </Field>
        <Field v-model="form.FunctionProblemID" :readonly="true" type="textarea" class="Field2" rows="2" label="      ">

        </Field>
        <Field v-model="form.NoticeMemo" :readonly="true" size="small" class="Field" center colon label="通知单描述" />
        <Field v-model="form.ProductionBatch" :readonly="true" size="small" class="Field" center colon label="生产批次" />
        <Field :readonly="true" size="small" class="Field" center colon label="班次">
          <template #input>
            {{ showShiftIDName(form.PShiftID) }}
          </template>
        </Field>
        <Field v-model="form.MaterialSpec" :readonly="true" size="small" class="Field" center colon label="物料规格" />
        <Field v-model="form.MachineID" :readonly="true" size="small" class="Field" center colon label="设备代码" />
        <Field v-model="form.SampleAmount" :readonly="true" size="small" class="Field" center colon label="抽样数量" />
        <Field v-model="form.AbnormalAmount" :readonly="true" size="small" class="Field" center colon label="异常数量" />
        <Field v-model="result" :readonly="true" size="small" class="Field" center colon label="质量要求" />
        <Field v-model="form.Reasons" :readonly="true" size="small" class="Field" center colon label="需注明的缺陷描述" />
        <!-- <Field v-model="form.AbnormalDescription" :readonly="true" size="small" class="Field" center colon label="缺陷描述" /> -->
        <Field v-model="form.Creator" :readonly="true" size="small" class="Field" center colon label="调机申请QC" />
        <Field v-model="form.CreateDatetime" :readonly="true" size="small" class="Field" center colon label="创建时间" />
        <Field v-model="showAppearanceCheckRecord" :readonly="true" size="small" class="Field" center colon
          label="外观检验记录" />

        <Field readonly size="small" class="Field" center colon label="终审结果">
          <template #input>
            <span v-if="form.FixedAgree == true">调机</span>
            <span v-else>不调机</span>
          </template>
        </Field>
        <Field v-model="form.FixedMan" :readonly="true" size="small" class="Field" center colon label="终审人" />
        <Field v-model="form.FixedDatetime" :readonly="true" size="small" class="Field" center colon label="终审时间" />

      </div>

      <van-row gutter="20">
        <van-col span="12">
          <div style="margin: 16px">
            <van-button color="#008792" round block type="info" @click="getRecord(form.AppearanceCheckRecord1)"
              style="">查看外观检验不合格记录</van-button>
          </div>
        </van-col>
        <van-col span="12">
          <div style="margin: 16px">
            <van-button color="#33a3dc" round block type="info" @click="checkSYS">查看实验室检验不合格项</van-button>
          </div>
        </van-col>
      </van-row>

      <van-row gutter="20">
        <van-col span="12">
          <div style="margin: 16px">
            <van-button color="#1AB394" round block type="info" @click="openQA">打开质量辅助决策界面</van-button>
          </div>
        </van-col>
        <van-col span="12">
          <div style="margin: 16px">
            <van-button color="#005831" round block type="info" @click="CheckTM">查看实验室复测记录</van-button>
          </div>
        </van-col>
      </van-row>
      <!-- 品管领班审核 -->
      <div v-if="form.QCLeaderChecked == true">
        <van-row style="margin-top: 10px">
          <van-col>
            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
          </van-col>
          <van-col class="message" style="margin-top: 5px">品管领班审核结果</van-col>
        </van-row>
        <Field readonly class="formstyle" name="是否同意" label="是否同意调机">
          <template #input>
            <span v-if="form.QCLeaderAgree == true">同意</span>
            <span v-else>不同意</span>
          </template>

        </Field>
        <Field readonly class="formstyle" v-model="form.QCLeaderMemo" name="处置建议" label="处置建议" placeholder="输入品管领班处置建议"
          rows="2" autosize type="textarea" maxlength="100" show-word-limit />

        <van-field readonly class="formstyle" label="审核时间" v-model="form.QCLeaderCheckDatetime" />
      </div>
      <!-- 生产现场主管审核 -->
      <div v-if="form.TeamLeaderChecked == true">
        <van-row style="margin-top: 10px">
          <van-col>
            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
          </van-col>
          <van-col class="message" style="margin-top: 5px">生产现场主管审核结果</van-col>
        </van-row>
        <Field readonly class="formstyle" name="是否同意" label="是否同意调机">
          <template #input>
            <span v-if="form.TeamLeaderAgree == true">同意</span>
            <span v-else>不同意</span>
          </template>
        </Field>
        <Field readonly class="formstyle" v-model="form.TeamLeaderMemo" name="处置建议" label="处置建议"
          placeholder="输入生产现场主管处置建议" rows="2" autosize type="textarea" maxlength="100" show-word-limit />

        <van-field readonly class="formstyle" label="审核时间" v-model="form.TeamLeaderCheckDatetime" />
      </div>
      <!-- 生产部门负责人审核 -->
      <div v-if="form.PrdManagerChecked == true">
        <van-row style="margin-top: 10px">
          <van-col>
            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
          </van-col>
          <van-col class="message" style="margin-top: 5px">生产部门负责人审核结果</van-col>
        </van-row>
        <Field readonly class="formstyle" name="是否同意" label="是否同意调机">
          <template #input>
            <span v-if="form.PrdManagerAgree == true">同意</span>
            <span v-else>不同意</span>
          </template>
        </Field>

        <Field class="formstyle" readonly v-model="form.PrdMangerMemo" name="处置建议" label="处置建议"
          placeholder="输入生产部门负责人处置建议" rows="2" autosize type="textarea" maxlength="100" show-word-limit />

        <van-field readonly class="formstyle" label="审核时间" v-model="form.PrdManagerCheckDatetime" />
      </div>
      <!-- 质量负责人审核 -->
      <div v-if="form.QCManagerChecked == true">
        <van-row style="margin-top: 10px">
          <van-col>
            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
          </van-col>
          <van-col class="message" style="margin-top: 5px">质量负责人审核结果</van-col>
        </van-row>
        <Field readonly class="formstyle" name="是否同意" label="是否同意调机">
          <template #input>
            <span v-if="form.QCManagerAgree == true">同意</span>
            <span v-else>不同意</span>
          </template>
        </Field>

        <Field class="formstyle" v-model="form.QCMangerMemo" name="处置建议" label="处置建议" placeholder="输入质量负责人处置建议" rows="2"
          autosize type="textarea" maxlength="100" show-word-limit />

        <van-field readonly class="formstyle" label="审核时间" v-model="form.QCManagerCheckDatetime" />
      </div>
      <!-- 利润点负责人审核 -->
      <div v-if="form.FactoryManagerChecked == true">
        <van-row style="margin-top: 10px">
          <van-col>
            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
          </van-col>
          <van-col class="message" style="margin-top: 5px">利润点负责人审核结果</van-col>
        </van-row>
        <Field readonly class="formstyle" name="是否同意" label="是否同意调机">
          <template #input>
            <span v-if="form.FactoryManagerAgree == true">同意</span>
            <span v-else>不同意</span>
          </template>
        </Field>

        <Field class="formstyle" v-model="form.FactoryMangerMemo" name="处置建议" label="处置建议" placeholder="输入利润点负责人处置建议"
          rows="2" autosize type="textarea" maxlength="100" show-word-limit />
        <van-field readonly class="formstyle" label="审核时间" v-model="form.FactoryManagerCheckDatetime" />
      </div>

    </div>




    <!-- 底部按钮 -->
    <!--<van-row class="button" gutter="2">
      <van-col span="8">
        <van-button
          :block="true"
          @click="startRepair"
          :disabled="btnStartShow"
          class="buttonColor2"
          type="primary"
          color="#138087"
          text="调机开始"
        />
      </van-col>
      <van-col span="8">
        <van-button
          :block="true"
          class="buttonColor"
          @click="stopRepair"
          type="primary"
          color="#f47920"
          text="暂停调机"
        />
      </van-col>
      <van-col span="8">
        <van-button
          :block="true"
          class="buttonColor2"
          @click="finishRepair"
          type="primary"
          color="#ed1941"
          text="调机结束"
        />
      </van-col>
    </van-row>-->
    <!-- 故障类型弹窗 -->
    <van-popup v-model="faultShowPicker" round position="bottom">
      <van-picker showPicker="false" title="故障类型选择" value-key="text" show-toolbar @confirm="faultOnConfirm"
        :columns="faultTypes" @cancel="faultShowPicker = false" default-index="0" />
    </van-popup>

    <!-- 暂停原因 -->
    <van-popup v-model="resonShow" round position="bottom">
      <van-picker showPicker="false" title="暂停原因选择" value-key="text" show-toolbar @confirm="resonConfirm"
        :columns="stopReson" @cancel="resonShow = false" default-index="0" />
    </van-popup>
  </div>
</template>
<script>
import {
  Icon,
  NoticeBar,
  Button,
  Row,
  Tag,
  Checkbox,
  Pagination,
  popup,
  Loading,
  Popup,
  Panel,
  ImagePreview,
  Toast,
  tab,
  tabs,
  Divider,
  Image as VanImage,
  Field,
  CellGroup,
  Cell,
  Picker,
  Uploader,
  Dialog,
  Col,
  RadioGroup,
  Radio,
} from "vant";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { _httpClient } from "@/libs/apisie";
import { storage } from "@/libs/utils";
import {
  removeToken,
  getToken,
  setBaseApiFrefix,
  getBaseApiFrefix,
} from "@/libs/auth";
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(tab);
Vue.use(tabs);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Panel);
Vue.use(Dialog);
Vue.use(Picker);
Vue.use(popup);
Vue.use(Uploader);
Vue.use(Loading);
Vue.use(Field);
Vue.use(RadioGroup);
Vue.use(Radio);
import Header from "@/components/header.vue";
import apicloud from "@/libs/apicloud";
export default {
  name: "QCmachineCheckedItem",
  components: {
    Button,
    NoticeBar,
    Header,
    ImagePreview,
    Icon,
    Row,
    tab,
    popup,
    Popup,
    tabs,
    Tag,
    VanImage,
    Toast,
    Divider,
    Field,
    CellGroup,
    Cell,
    Uploader,
    Picker,
    Dialog,
    Col,
    RadioGroup,
    Radio,
  },

  data() {
    return {
      btnLoading: false,
      winName: "", //窗口名
      user: [], //当前登录用户
      //多媒体文件
      photoList: [
        //图片
      ],
      pictureNum: 0, //照片数量
      playing: "播放中...", //语音播放中字幕
      audioLoad: false, // 语音播放中
      audioStop: true, // 语音暂停
      photoShow: false, //照片显示控制
      vedioShow: false, //视频显示控制
      audioShow: false, //语音显示控制
      vedioList: [], //视频
      audioPath: "", //语音
      resonShow: false, //暂停原因录入弹窗是否显示
      btnStartShow: false, //开始调机按钮权限
      btnAssignShow: true, //任务转派按钮权限
      btnStopShow: true, //调机暂停按钮权限
      btnEndShow: true, //调机结束按钮权限
      stopResonValue: "", //调机暂停原因
      showAppearanceCheckRecord: "",
      equipRepairVo: {
        id: null,
        eqKey: null,
        equipName: "",
        equipCode: "",
        remark: null,
        picList: [],
        videoList: [],
        audioList: [],
        resTime: null,
        requestUser: "",
        repairReson: "",
      },
      faultShowPicker: false, //故障原因下拉框
      screenWidth: 0,
      checked: true,
      active: 2,
      helpUser: [], //协助人
      helpUserStr: "", //协助人拼接字符串
      helpUserNameStr: "", //协助人拼接字符串
      helpUserContent: "", //协助人拼接字段
      faultType: "", //故障类型
      sparePart: [], //备件记录
      sparePartContent: "", //备件拼接字段
      fileUrl: "",
      form: [],
      faultTypes: [],
      stopReson: [],
      uploadSuccess: false,
      columnsDealType: [],
      columnsEmployee: [],
      EmployeeName1: "",
      EmployeeName2: "",
      EmployeeName3: "",
      EmployeeName4: "",
      columnsQProblem: [],
      columnsshift: [],
      showPickerEmployee: false,
      showPickerQProblem: false,
      item: {},
      valuepDealTypeName: "",
      EmployeeName: "",
      time: "",
      FactoryID: "",
      valuepShiftName: "",
      CheckTypeName: "",
      QProblemName: "",
      valueteamid: "",
      nowDate: "",
      EmployeeID: "",
      result: [],
      //领班
      QCLeaderAgreeValue: "",
      //带版主管
      TeamLeaderAgreeValue: "",
      //质量负责人
      QCManagerAgreeValue: "",
      //生产部门负责人
      PrdManagerAgreeValue: "",
      //利润点负责人
      FactoryManagerAgreeValue: "",
      //当前状态
      status: "",
      //是否显示人员
      showEmployee: false,
    };
  },
  created: function () {

    let oldHight = api.winWidth;
    this.screenWidth = oldHight;
    this.user = JSON.parse(storage.get("user"));
    this.user.userId = this.user.userName;
    this.form = api.pageParam.item;
    this.nowDate = this.getNowTime();
    this.initList();
    this.getQualityProblems();
    this.getshift();
    //获取员工列表
    this.getEmployeeID();
    this.getAppearanceCheckRoward()

    this.getUsername(this.form.Creator)
  },
  methods: {
    async getUsername(id) {

      // alert("----")
      try {

        let res4 = await _httpClient.get(
          _httpClient.getApiPrefix() + "/Employee/GetList?EmployeeID=" + id)
        // alert(JSON.stringify(res4))
        if (res4.Data.length > 0) {
          // alert("-xxx-")
          this.form.Creator = res4.Data[0].EmployeeName
          return
        }
      } catch (e) {
        alert(JSOn.stringify(e))
      }
      this.form.Creator = id
    },
    async initList() {
      if (this.form.Require1) {
        this.result.push("及时调机整改");
      }
      if (this.form.Require2) {
        this.result.push("停机调整");
      }
      if (this.form.Require3) {
        this.result.push("产品要求返工，发出返工通知单");
      }
      if (this.form.Require4) {
        this.result.push("在线自检挑出");
      }

      //判断审批流程状态
      if (!this.form.QCLeaderChecked) {
        //品管领班未审核
        this.status = 1;
      } else if (this.form.QCLeaderChecked && this.form.QCLeaderAgree && !this.form.TeamLeaderChecked) {//品管领班审核且同意,主管未审核
        //生产现场主管审核
        this.status = 2;
      } else if (this.form.TeamLeaderChecked && !this.form.TeamLeaderAgree && !this.form.PrdManagerChecked) {//生产现场主管已审核且不同意，生产部门负责人未审批
        //生产审核
        this.status = 3;
      } else if (this.form.PrdManagerChecked && !this.form.PrdManagerAgree && !this.form.QCManagerChecked) {//生产部门负责人审核且不同意 质量未审核
        //质量审核
        this.status = 4;
      } else if (this.form.QCManagerChecked && this.form.QCManagerAgree && !this.form.FactoryManagerChecked) {//质量负责人审核且同意 利润点未审批
        //利润点负责人审批
        this.status = 5;
      }

      try {

        if (this.form.QCLeaderUserID != "") {
          let res4 = await _httpClient.get(
            _httpClient.getApiPrefix() + "/Employee/GetList?EmployeeID=" + this.form.QCLeaderUserID)


          if (res4.Data.length > 0) {
            this.EmployeeName1 = res4.Data[0].EmployeeName
          }

        }

        if (this.form.TeamLeaderUserID != "") {

          let res4 = await _httpClient.get(
            _httpClient.getApiPrefix() + "/Employee/GetList?EmployeeID=" + this.form.TeamLeaderUserID)

          if (res4.Data.length > 0) {
            this.EmployeeName2 = res4.Data[0].EmployeeName
          }
        }


        if (this.form.PrdMangerUserID != "") {
          let res4 = await _httpClient.get(
            _httpClient.getApiPrefix() + "/Employee/GetList?EmployeeID=" + this.form.PrdMangerUserID)

          if (res4.Data.length > 0) {
            this.EmployeeName3 = res4.Data[0].EmployeeName
          }
        }

        if (this.form.QCMangerUserID != "") {

          let res4 = await _httpClient.get(
            _httpClient.getApiPrefix() + "/Employee/GetList?EmployeeID=" + this.form.QCMangerUserID)

          if (res4.Data.length > 0) {
            this.EmployeeName4 = res4.Data[0].EmployeeName
          }
        }

        // alert(JSON.stringify(this.form))
      } catch (e) {
        Toast(JSON.stringify(e))
      }
    },
    getRecord(id) {

      if (id = "" || id == 0 || id == null) {
        alert("没有外观检验不合格记录");
        return;
      }

      api.openWin({
        name: 'qCcheckReview',
        url: './quality-qCcheckReview.html',
        pageParam: {
          id: id
        }
      });

    },
    openQA() {
      let _this = this
      // alert(_this.form.POrderID)
      api.openWin({
        name: 'qAssistance',
        url: './qAssistance-qualityAssistance.html',
        pageParam: {
          POrderID: _this.form.POrderID,
          PlineID: _this.form.MachineID
        }
      });


    },
    async CheckTM() {
      // let id = this.form.LaboratoryCheckRecord1


      // if (id == "" || id == null || id == undefined) {
      //   Toast.clear()
      //   Toast.fail("当前没有维护实验室复测记录，无法获取复测记录！")
      //   return
      // }

      // api.openWin({
      //   name: 'viewlaboratorytest1',
      //   url: './equipmentsj-viewlaboratorytest1.html',
      //   pageParam: {
      //     id: this.form.LaboratoryCheckRecord1
      //   }
      // });

      let id = this.form.LaboratoryCheckRecord1
      let CheckItem = this.form.CheckItem;
      let CheckBatch = this.form.CheckBatch;
      if (CheckBatch =="全项检验") {
        CheckBatch = "问题产品复核检验-全项"
      }
      else {
        CheckBatch = "问题产品复核检验-过程"
      }

      if (id == "" || id == null || id == undefined) {
        Toast.clear()
        Toast.fail("当前没有维护实验室复测记录，无法获取复测记录！")
        return
      }

      api.openWin({
        name: 'viewlaboratorytest1',
        url: './equipmentsj-viewlaboratorytest1.html',
        pageParam: {
          id: this.form.LaboratoryCheckRecord1,
          CheckBatch: CheckBatch,
          CheckItem: this.form.CheckItem
        }
      });
    },
    async checkSYS() {
      let id = this.form.LaboratoryCheckRecord1;
      let CheckBatch = this.form.CheckBatch;
      let CheckItem = this.form.CheckItem;

      if (id == "" || id == null || id == undefined) {
        Toast.clear()
        Toast.fail("当前没有维护实验室检验记录，无法获取不合格记录！")
        return
      }

      api.openWin({
        name: 'viewlaboratorytest',
        url: './equipmentsj-viewlaboratorytest.html',
        pageParam: {
          id: this.form.LaboratoryCheckRecord1,
          CheckBatch: this.form.CheckBatch,
          CheckItem: this.form.CheckItem
        }
      });

      // let id = this.form.LaboratoryCheckRecord1


      // if (id == "" || id == null || id == undefined) {
      //   Toast.clear()
      //   Toast.fail("当前没有维护实验室检验记录，无法获取不合格记录！")
      //   return
      // }

      // api.openWin({
      //   name: 'viewlaboratorytest',
      //   url: './equipmentsj-viewlaboratorytest.html',
      //   pageParam: {
      //     id: this.form.LaboratoryCheckRecord1
      //   }
      // });
    },

    async getAppearanceCheckRoward() {

      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/QualityAppearanceCheck/GetEntityName?FieldValue=" + this.form.AppearanceCheckRecord1);
        if (res.HttpCode === "200") {
          this.showAppearanceCheckRecord = res.Data
        } else {
          this.showAppearanceCheckRecord = this.form.AppearanceCheckRecord1
        }

      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }


    },
    //获取员工列表
    async getEmployeeID() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/Employee/GetList",
        );
        if (res.HttpCode === "200") {
          let temp = res.Data.map(item => ({ EmployeeID: item.EmployeeID, EmployeeName: item.EmployeeName }))
          temp.forEach(item => {
            _this.columnsEmployee.push(item);
          })
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //获取班次信息
    async getshift() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/ProductionShift/GetList?factoryID=" + _this.form.FactoryID,
        );
        if (res.HttpCode === "200") {
          for (let index = 0; index < res.Data.length; index++) {
            if (res.Data[index].Actived == false) {
              delete res.Data[index];
            }
          }
          let shiftMap = res.Data.map(item => ({ pShiftName: item.PShiftName, pShiftID: item.PShiftID }))
          _this.columnsshift = shiftMap
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    showShiftIDName(pShiftID) {
      var pShiftName;
      this.columnsshift.forEach(item => {
        if (item.pShiftID === pShiftID) {
          pShiftName = item.pShiftName;

        }
      })
      return pShiftName
    },
    showQProblemID(QProblemID) {
      var QProblemName;
      this.columnsQProblem.forEach(item => {
        if (item.QProblemID === QProblemID) {
          QProblemName = item.QProblemName;
        }
      })
      return QProblemName;
    },
    showDealType(type) {
      var DealTypeName;
      this.columnsDealType.forEach(item => {
        if (item.DealTypeID === type) {
          DealTypeName = item.DealTypeName;
        }
      })
      return DealTypeName;
    },
    //获取缺陷原因
    async getQualityProblems() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/QualityProblems/GetList",
        );
        if (res.HttpCode === "200") {
          let temp = res.Data.map(item => ({ QProblemID: item.QProblemID, QProblemName: item.QProblemName }))
          temp.forEach(item => {
            _this.columnsQProblem.push(item);
          })
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    // 获取当前时间
    getNowTime() {
      let dateTime;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      dateTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      return dateTime;
    },
  },
};
</script>
<style>
body {
  background-color: White;
}

.pic {
  width: 100%;
  text-align: center;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}

.buttonColor {
  background-color: #ff9933;
  border-color: #ff9933;
}

.buttonColor2 {
  background-color: #1076c0;
  border-color: #1076c0;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.divStyle {
  border: 1px solid #dcdcdc;
  border-top-width: 3px;
  border-left-width: 3px;
  margin-left: 5px;
  margin-right: 4px;
  margin-top: 4px;
}

.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}

.divMedia {
  margin-top: 0px;
  height: 230px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.divMedia2 {
  margin-top: 0px;
  height: 160px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.button {
  position: fixed;
  left: 5px;
  right: 5px;
  bottom: 24px;
  width: 100%;
  height: 30px;
  font-size: 12px;
}

.divMessage {
  margin-top: 0px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.Field {
  font-weight: bold;
  font-size: 15px;
  color: #9c8e8e;
  height: 45px;
}

.Field2 {
  font-weight: bold;
  font-size: 15px;
  color: #9c8e8e;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 5rem;
  bottom: 0rem;
  overflow: scroll;
  right: 0;
  width: 100%;
  z-index: 1;
}
</style>
